<template>
    <div class="side-bar">
        <el-col :span="24">
            <!-- #0b182b -->
             <!-- default-active="/project/auth" -->
            <el-menu @select="handleSelect" :default-active="num" class="side-group" background-color="#0b182b" text-color="#6f83a1" active-text-color="#ffffff" :router="false">
                <!-- <el-submenu :index="item.name" v-for="item in menu" :key="item.name" class="sub-menu"> -->
                <!-- <span slot="title" class="menu-name">{{item.name}}</span> -->
                <el-menu-item v-for="(item, index) in menu" :key="index" :index="index">
                   {{item.name}}
                </el-menu-item>
                <!-- <el-menu-item index="/project/auth">
                    项目权限
                </el-menu-item>
                <el-menu-item index="/free/auth">
                    免费权限
                </el-menu-item> -->
                <!-- </el-submenu> -->
            </el-menu>
        </el-col>
    </div>
</template>
<script>
export default {
    name: "SideBar",
    props: ["menu", "num"],
    data() {
        return {
            menu: undefined,
            path: 0
        };
    },
    methods: {
        handleSelect(key) {
           this.$emit('update:num', key);
        }
    }
};
</script>
<style>
.side-bar {
    background-color: #0b182b;
    height: 100%;
}
.side-group {
    border: none;
}
.el-menu-item {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
}
.sub-menu .el-menu-item:last-of-type {
    border: none;
}
</style>
